<template>
  <ChartComp :id="id?id:'overallLine'"
    :message="overallLine" />
</template>

<script>
import { getyearStatistics } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      overallLine: {}
    }
  },
  created() {},
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getyearStatistics({ year: this.year }).then(res => {
        let projectData = res?.data?.project?.projectData ?? []
        let achieveData = res?.data?.achieve?.projectData ?? []
        this.overallLine = {
          grid: {
            left: '20',
            right: '20',
            top: '15%',
            bottom: '20',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            textStyle: {
              color: '#fff'
            },
            className: 'LineChart-tooltip',
            extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`
          },
          legend: {
            textStyle: {
              color: '#EAFFF0'
            }
          },
          xAxis: {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true
            },
            splitLine: {
              show: true,
              alignWithLabel: true,

              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            },
            axisLabel: {
              color: '#7CB4FF'
            },
            axisLine: {
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            },
            axisLabel: {
              color: '#7CB4FF'
            },
            boundaryGap: ['0%', '20%'],
            axisLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#214D87'
              }
            }
          },
          color: ['#49A8FF', '#FFD100', '#FF3E3E'],
          series: [
            {
              type: 'line',
              name: '项目数量',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              symbol: 'none',
              data: projectData,
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(255, 62, 62,0.05)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 62, 62,0.1)'
                    }
                  ],
                  false
                )
              }
            },
            {
              type: 'line',
              smooth: true,
              name: '成果数量',
              emphasis: {
                focus: 'series'
              },
              symbol: 'none',
              data: achieveData,
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(230,255,127,0.05)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(230,255,127,0.1)'
                    }
                  ],
                  false
                )
              }
            }
          ]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>